<template lang="pug">
    .container
        .rope
        .form
            .hole
            p.title 后台登录
            .item-list
                .item
                    label.username
                    input(placeholder="输入用户名", v-model="username")
                .item
                    label.password
                    input(type="password", placeholder="输入密码", v-model="pwd")
            button.submit(@click="login") 登录
</template>

<script>
    export default {
        data() {
            return {
                username: '',
                pwd: '',
            };
        },

        methods: {
            async login() {
                const {username, pwd} = this;

                if (await this.$http.post('/tools_user/login', {username, pwd}) !== 'Login') {
                    this.$Modal.info({
                        title:      '登录异常',
                        content:    '用户名或密码不正确或用户已被禁用',
                    });
                } else {
                    this.$store.commit('login');
                    this.$router.replace('/');
                }
            }
        },

        beforeRouteEnter(to, from, next) {
            next(vm => {
                if (vm.$store.state.login) {
                    vm.$router.replace('/');
                }
            });
        }
    }
</script>

<style lang="stylus">
    *
        transition all .3s ease
</style>

<style lang="stylus" scoped>
    .container
        min-height 100%
        background url(../assets/bg.jpg) center / cover

    .rope
        width               52px
        height              800px
        background          url(../assets/tape.jpg)
        position            fixed
        left                50%
        bottom              50%
        transform           translate(-50%, -123px)
        z-index             10
        border              1px solid #dfdfdf
        border-top-style    none
        border-bottom-style none

    .form
        width               370px
        height              307px
        position            fixed
        top                 50%
        left                50%
        transform           translate(-50%, -50%)
        background-color    rgba(255, 255, 255, .2)
        border              1px solid rgba(255, 255, 255, .4)
        border-radius       10px
        box-shadow          0 4px 5px rgba(0, 0, 0, .1)

    .hole
        margin              28px auto 0
        width               82px
        height              6px
        background-color    rgba(0, 0, 0, .05)
        border-radius       3px
        border              1px solid rgba(255, 255, 255, .4)

    .title
        text-align          center
        color               #fff
        font-size           18px
        margin-top          40px

    .submit
        width               280px
        height              40px
        background-color    #91c46c
        border              1px solid #73a84c
        border-radius       5px
        box-shadow          inset 0 1px 1px #c8e5b3
        font-size           14px
        color               #fff
        vertical-align      middle
        text-align          center
        margin              16px auto 0
        display             block
        cursor              pointer
        outline             none

        &:hover
            background-color lighten(@background-color, 10%)

        &:active
            background-color @background-color

    .item-list
        margin              40px auto 0
        width               280px

        .item
            height          40px
            width           100%
            display         flex
            outline         none
            font            14px
            background      transparent
            border          1px solid rgba(242, 242, 242, .4)
            box-shadow      inset 0 0 3px rgba(0, 0, 0, .28)
            border-radius   5px
            box-sizing      border-box


            & + .item
                margin-top  13px

            label
                width               40px
                height              100%
                background-position center
                background-repeat   no-repeat

                &.username
                    background-image url(../assets/username.png)

                &.password
                    background-image url(../assets/password.png)

            input
                flex 1
                background-color    transparent
                outline             none
                border              none
                font-size           14px
                color               #fff

    ::-webkit-input-placeholder
        color #eee
</style>
